<template>
    <div class="board-content">
        <div class="board-body">
            <div class="board-header">
                <div class="board-title">
                    {{ title }}
                </div>
                <div class="board-tabs">
                    <el-tabs v-model="params.status" type="card" @tab-click="list">
                        <el-tab-pane label="全 部" name="0"></el-tab-pane>
                        <el-tab-pane label="正 常" name="1"></el-tab-pane>
                        <el-tab-pane label="锁 定" name="2"></el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="board-main">
                <div class="board-handle">
                    <div class="board-button">
                        <el-button type="warning" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                        <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                    </div>
                    <div class="board-search">
                        <div class="search-item">
                            <el-input v-model="params.kwd" placeholder="请输入用户名或者昵称" size="medium" clearable
                                      @input="search()">
                                <el-button slot="append" type="success" @click="search()"
                                           icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </div>
                </div>
                <el-table element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          v-loading="loading"
                          :data="listData.data" border>
                    <el-table-column prop="id" label="编号" width="65" align="center"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="150"></el-table-column>
                    <el-table-column prop="nickname" label="昵称" width="150"></el-table-column>
                    <el-table-column prop="role.title" label="角色" width="140"></el-table-column>
                    <el-table-column prop="status_text" label="状态" width="70" align="center">
                        <template slot-scope="scope">
                            <div v-html="scope.row.status_text"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" min-width="260">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="fa fa-edit" size="mini" plain @click="edit(scope.row)"> 编辑
                            </el-button>
                            <el-button type="danger" icon="fa fa-lock" size="mini" plain
                                       @click="lock(scope.row.id)" v-if="scope.row.status === 1"> 锁定
                            </el-button>
                            <el-button type="success" icon="fa fa-unlock-alt" size="mini" plain
                                       @click="active(scope.row.id)" v-if="scope.row.status === 2"> 启用
                            </el-button>
                            <el-button type="info" icon="fa fa-trash" size="mini" plain @click="destroy(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="board-pagination">
                    <div class="board-count">总共 <em> {{ listData ? listData.total : 0 }} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   :total="listData.total"
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   background
                                   :current-page="listData.current_page"
                                   @current-change="page">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog fullscreen :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :title="dialog.title"
                   :visible.sync="dialog.show" center>
            <el-form v-if="form" :model="form" :rules="rules" ref="form" class="dialog-form">
                <el-form-item label="账 户：" prop="username">
                    <el-input v-model="form.username" placeholder="请填写管理员账户" size="medium" clearable></el-input>
                </el-form-item>
                <el-form-item label="昵 称：" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请填写管理员昵称" size="medium" clearable></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password" v-if="form.id == 0">
                    <el-input v-model="form.password" placeholder="请填写管理员密码，默认123456" size="medium" clearable
                              onfocus="this.type='password'"></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password" v-else>
                    <el-input v-model="form.password" placeholder="请填写管理员密码，不填写表示不修改密码" size="medium" clearable
                              onfocus="this.type='password'"></el-input>
                </el-form-item>
                <el-form-item label="头 像：" prop="avatar">
                    <div class="form-avatar">
                        <img v-for="(avatar,a) in avatars" :src="require('../../../img/'+ avatar +'.jpg')"
                             :class="avatar == form.avatar ? 'active' : ''" @click="select(avatar)" :key="a" alt="">
                    </div>
                </el-form-item>
                <el-form-item label="状 态：" prop="status">
                    <el-radio-group v-model="form.status" size="medium">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="2" border>锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" :loading="button.loading" :disabled="button.disable"
                               @click="update">{{ button.text }}</el-button>
                    <el-button @click="dialog.show = false">关 闭</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {ManagerList, ManagerUpdate, ManagerLock, ManagerActive, ManagerDestroy} from '../../utils/request';

export default {
    computed: {
        ...mapState({
            title: state => state.title,
        }),
    },
    data: function () {
        return {
            loading: false,
            listData: [],
            roles: [],
            params: {page: 1, kwd: '', status: 0, rid: 0},
            button: {loading: false, disable: false, text: '提 交'},
            dialog: {title: '', show: false},
            avatars: ['d', '1', '2', '3', '4', '5', '6', '7'],
            form: null,
            rules: {
                username: [{required: true, message: '请填写管理员账户', trigger: 'blur'}],
                nickname: [{required: true, message: '请填写管理员昵称', trigger: 'blur'}],
            }
        }
    },
    activated() {
        this.list();
    },
    methods: {
        list() {
            this.loading = true;
            ManagerList(this.params).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.listData = res.data;
                }
                this.loading = false;
            }).catch((e) => {
                this.loading = false;
            });
        },
        async create() {
            this.form = {
                username: '',
                nickname: '',
                avatar: 'd',
                rid: 1,
                password: '',
                status: 1,
            };
            this.dialog.title = '新增管理员';
            this.dialog.show = true;
            this.$nextTick(()=>{
                this.$refs['form'].clearValidate();
            });
        },
        async edit(detail) {
            this.form = {
                id: detail.id,
                nickname: detail.nickname,
                avatar: detail.avatar,
                username: detail.username,
                rid: detail.rid,
                password: '',
                status: detail.status,
            };
            this.dialog.title = '编辑管理员';
            this.dialog.show = true;
            this.$nextTick(()=>{
                this.$refs['form'].clearValidate();
            });
        },
        update() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.button.disabled = true;
                    this.button.loading = true;
                    this.button.text = '提交中...';
                    ManagerUpdate(this.form).then((res) => {
                        if (res.status) {
                            this.$func.error(res.message);
                        } else {
                            this.$func.success(res.message).then(() => {
                                this.dialog.show = false;
                                this.list();
                            })
                        }
                        this.button.disabled = false;
                        this.button.loading = false;
                        this.button.text = '提 交';
                    }).catch((e) => {
                        this.button.disabled = false;
                        this.button.loading = false;
                        this.button.text = '提 交';
                    });
                }
            });
        },
        async lock(id) {
            ManagerLock({id: id}).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.list();
                }
            });
        },
        async active(id) {
            ManagerActive({id: id}).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.list();
                }
            });
        },
        async destroy(id) {
            this.$confirm('您确定要删除选中的该条信息吗？', '提示', {
                type: 'warning',
                confirmButtonText: '确 定',
                cancelButtonText: '取 消'
            }).then(() => {
                ManagerDestroy({id: id}).then((res) => {
                    if (res.status) {
                        this.$func.error(res.message);
                    } else {
                        this.list();
                    }
                });
            }).catch(() => {
            });
        },
        search() {
            this.params.page = 1;
            this.list();
        },
        page(val) {
            this.params.page = val;
            this.list();
        },
        select(a){
            this.form.avatar = a;
        }
    }
}
</script>
